import React,{useState} from 'react'
import { Table, Button ,Pagination,Popconfirm } from 'antd';
import { useEffect } from 'react';
import { getUserListApi } from '../../apis/user';
import { delAccountApi } from '../../apis/user';
import moment from 'moment/moment'
export default function AccountsList() {
  const columns = [
    {
      title: '用户名',
      dataIndex: 'account',
    },
    {
      title: '角色',
      dataIndex: 'userGroup',
    },
    {
      title: '会员日期',
      dataIndex: 'updateDate',
      render:((date)=>{
         return moment(date).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    {
      title: '操作',
      render: (_, record) => (
        <Popconfirm
        placement="topLeft"
        title='确认删除该用户？'
        onConfirm={()=>confirm(record._id)}
        okText="确认"
        cancelText="取消"
      >
         <Button type="primary" danger>删除</Button>
      </Popconfirm>
       
      ),
    },
  ];
  // 设置用户数据
  const [data,setData]=useState([])
  // 设置每页数量
  const [loading,setloading]=useState(false)
  const [total,setTotal]=useState(0)
  // 类似于mounted的生命周期函数
 useEffect(()=>{
   getData()
 },[])
// 获取用户数据
 async function getData(params={pageSize:5,pageNumber:1}){
  setloading(true)
  let res= await getUserListApi(params)
  console.log('用户信息',res);
  setData(res.data)
  setTotal(res.totalCount)
  setloading(false)
  
 }
//  分页
function onChange(pageNumber,pageSize){
  console.log('分页',pageSize,pageNumber);
 getData({pageSize:pageSize,pageNumber:pageNumber})
 
}
// 确认删除
async function confirm(_id){
   console.log('删除',_id);
   await delAccountApi(_id)
   getData()
}
  return (
    <Table 
    loading={loading}
    rowKey={'_id'} 
    columns={columns} 
    dataSource={data} 
    pagination={{
      total,
      pageSize:5,
      onChange
    }}
   
    />
  )
}
